<template>
  <div class="edit-popup">
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="700px"
        @confirm="handleSubmit"
        @close="handleClose"
    >
      <el-form ref="formRef" :model="formData" label-width="100px" :rules="formRules">

<!--                <el-form-item label="院区" prop="cid">-->
<!--                    <el-select class="flex-1" v-model="formData.cid" clearable placeholder="请选择院区">-->
<!--                        <el-option -->
<!--                            v-for="(item, index) in pagerExtend.campus_list"-->
<!--                            :key="index" -->
<!--                            :label="item.name"-->
<!--                            :value="parseInt(item.id)"-->
<!--                        />-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="房间" prop="rid">-->
<!--                    <el-select class="flex-1" v-model="formData.rid" clearable placeholder="请选择房间">-->
<!--                        <el-option v-for="(item, index) in pagerExtend.room_list" :key="index" :label="item.building.name + ' ' + item.name" :value="parseInt(item.id)" />-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--        <el-form-item label="设备" prop="device_id">-->
<!--          <el-select class="flex-1" v-model="formData.device_id" clearable placeholder="请选择设备">-->
<!--            <el-option-->
<!--                v-for="(item, index) in pagerExtend.device_list"-->
<!--                :key="index"-->
<!--                :label="item.name"-->
<!--                :value="parseInt(item.id)"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->

        <el-form-item label="房间" prop="cbr_ids">
          <el-cascader
              disabled="true"
              class="flex-1"
              :options="optionsData.room_hospital"
              clearable
              v-model="formData.cbr_ids"
              :onchange="set_form_date('cbr')"
              filterable/>
        </el-form-item>

<!--        <el-form-item label="设备" prop="cd_ids">-->
<!--          <el-cascader class="flex-1" :options="optionsData.device" clearable v-model="formData.cd_ids" :onchange="set_form_date('cd')" filterable/>-->
<!--          &lt;!&ndash;:props="props1"&ndash;&gt;-->
<!--        </el-form-item>-->

        <el-form-item label="设备名称" prop="device_name">
          <el-input v-model="formData.device_name" clearable placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="设备编号" prop="device_no">
          <el-input
              v-model="formData.device_no"
              clearable
              placeholder="请输入设备编号"
          />
        </el-form-item>
        <el-form-item label="设备类型" prop="device_type">
          <el-radio-group v-model="formData.device_type">
<!--            <el-radio :label="0">水电表</el-radio>-->
            <el-radio :label="1">水表</el-radio>
            <el-radio :label="2">电表</el-radio>
          </el-radio-group>
        </el-form-item>

<!--        <el-form-item label="状态" prop="status">-->
<!--          <el-select class="flex-1" v-model="formData.status" clearable placeholder="请选择状态">-->
<!--            <el-option-->
<!--                v-for="(item, index) in dictData.show_status"-->
<!--                :key="index"-->
<!--                :label="item.name"-->
<!--                :value="parseInt(item.value)"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->

        <el-form-item label="设备系数" prop="coefficient">
          <el-input v-model="formData.coefficient" clearable placeholder="请输入设备系数"/>
        </el-form-item>
        <el-form-item label="水电价" prop="price">
          <el-input v-model="formData.price" clearable placeholder="请输入水电价"/>
        </el-form-item>
        <el-form-item label="底数" prop="base_number">
          <el-input v-model="formData.base_number" clearable placeholder="请输入底数"/>
        </el-form-item>
        <el-form-item label="读数" prop="reading">
          <el-input v-model="formData.reading" clearable placeholder="请输入读数"/>
        </el-form-item>
<!--        <el-form-item label="使用量" prop="use_total">-->
<!--          <el-input v-model="formData.use_total" clearable placeholder="请输入使用量"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="电梯费" prop="lift_fee">-->
<!--          <el-input v-model="formData.lift_fee" clearable placeholder="请输入电梯费"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="二次压力费" prop="second_pressure_fee">-->
<!--          <el-input v-model="formData.second_pressure_fee" clearable placeholder="请输入二次压力费"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="总费用" prop="total_fee">-->
<!--          <el-input v-model="formData.total_fee" clearable placeholder="请输入总费用"/>-->
<!--        </el-form-item>-->
        <el-form-item label="记录时间" prop="log_time">
          <el-date-picker
              class="flex-1 !flex"
              v-model="formData.log_time"
              clearable
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择记录时间">
          </el-date-picker>
        </el-form-item>

      </el-form>
    </popup>
  </div>
</template>

<script lang="ts" setup name="roomHospitalDeviceEdit">
import type {FormInstance} from 'element-plus'
import Popup from '@/components/popup/index.vue'
import {
  apiRoomHospitalDeviceAdd,
  apiRoomHospitalDeviceEdit,
  apiRoomHospitalDeviceDetail
} from '@/api/room/room_hospital_device'
import {timeFormat} from '@/utils/util'
import type {PropType} from 'vue'
import {useDictOptions} from "@/hooks/useDictOptions";
import {selectBuilding, selectRoomHospital, selectDevice} from "@/api/campus";

defineProps({
  dictData: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  },
  pagerExtend: {
    type: Object as PropType<Record<string, any[]>>,
    default: () => ({})
  },
})

const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')

// 弹窗标题
const popupTitle = computed(() => {
  return mode.value == 'edit' ? '编辑全院设备关联' : '新增全院设备关联'
})

const set_form_date = async (data_key: string) => {
  if (data_key == 'cbr') {
    if (formData.cbr_ids.length == 3) {
      formData.cid = formData.cbr_ids[0]
      formData.bid = formData.cbr_ids[1]
      formData.rid = formData.cbr_ids[2]
    } else {
      formData.cid = ''
      formData.bid = ''
      formData.rid = ''
    }
  }
  if (data_key == 'cd') {
    if (formData.cd_ids.length == 2) {
      formData.device_id = formData.cd_ids[1]
    } else {
      formData.device_id = ''
    }
  }
}

// const props1 = {
//   checkStrictly: true,
// }

const {optionsData} = useDictOptions<{
  building: any[],
  room_hospital: any[],
  device: any[],
}>({
  building: {
    api: selectBuilding
  },
  room_hospital: {
    api: selectRoomHospital
  },
  device: {
    api: selectDevice
  },
})

// 表单数据
const formData = reactive({
  id: '',
  cid: '',
  rid: '',
  status: 1,
  device_id: '',
  coefficient: '',
  price: '',
  base_number: '',
  reading: '',
  use_total: '',
  lift_fee: '',
  second_pressure_fee: '',
  total_fee: '',
  log_time: '',
  bid: '',
  cbr_ids: '',
  cd_ids: '',
  device_name: "",
  device_no: "",
  device_type: 1,
})

// 表单验证
const formRules = reactive<any>({
  cid: [{
    required: true,
    message: '请选择院区',
    trigger: ['blur']
  }],
  rid: [{
    required: true,
    message: '请选择房间',
    trigger: ['blur']
  }],
  device_id: [{
    required: true,
    message: '请选择设备',
    trigger: ['blur']
  }],
  status: [{
    required: true,
    message: '请选择状态',
    trigger: ['blur']
  }],
  coefficient: [{
    required: true,
    message: '请输入设备系数',
    trigger: ['blur']
  }],
  price: [{
    required: true,
    message: '请输入水电价',
    trigger: ['blur']
  }],
  base_number: [{
    required: true,
    message: '请输入底数',
    trigger: ['blur']
  }],
  reading: [{
    required: true,
    message: '请输入读数',
    trigger: ['blur']
  }],
  use_total: [{
    required: true,
    message: '请输入使用量',
    trigger: ['blur']
  }],
  lift_fee: [{
    required: true,
    message: '请输入电梯费',
    trigger: ['blur']
  }],
  second_pressure_fee: [{
    required: true,
    message: '请输入二次压力费',
    trigger: ['blur']
  }],
  total_fee: [{
    required: true,
    message: '请输入总费用',
    trigger: ['blur']
  }],
})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key]
    }
  }
}

const getDetail = async (row: Record<string, any>) => {
  const data = await apiRoomHospitalDeviceDetail({
    id: row.id
  })
  setFormData(data)
}


// 提交按钮
const handleSubmit = async () => {
  await formRef.value?.validate()
  const data = {...formData,}
  mode.value == 'edit'
      ? await apiRoomHospitalDeviceEdit(data)
      : await apiRoomHospitalDeviceAdd(data)
  popupRef.value?.close()
  emit('success')
}

//打开弹窗
const open = (type = 'add') => {
  mode.value = type
  popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
  emit('close')
}

defineExpose({
  open,
  setFormData,
  getDetail
})

</script>
